<template>
  <div class="flex justify-center items-center" style="height: 100vh">
    <div class="row base-card-shadow" style="width: 80vw;min-width: 300px">
      <div class="col-6 flex justify-center items-center " v-show="$q.screen.gt.sm">
        <q-img
            :src="require('../assets/login-panel.jpg')"
            style="width: 480px;"
        >
          <div class="absolute-bottom text-subtitle1 text-center">
            51提效 让你事半功倍
          </div>
        </q-img>
      </div>
      <q-separator vertical inset v-if="$q.screen.gt.sm"/>
      <div v-if="!isRegistry" class="col flex justify-center items-center">
        <q-card square style="min-width: 290px;height: 100%; width: 60%;" class="no-shadow">
          <q-card-section align="center">
            <h4 class="text-uppercase">
              <span>用 户 登 陆</span>
            </h4>
            <!-- 账号 -->
            <q-input class="logon-input"
                     clearable
                     standout="bg-cyan text-white"
                     bottom-slots
                     v-model="userForm.account"
                     label="账号"
            >
              <template v-slot:prepend>
                <q-icon name="account_circle"/>
              </template>
            </q-input>
            <!-- 密码 -->
            <q-input class="logon-input"
                     standout="bg-cyan text-white"
                     bottom-slots
                     v-model="userForm.password"
                     label="密码"
                     :type="isPwd ? 'password' : 'text'" hint=""
            >
              <template v-slot:prepend>
                <q-icon name="vpn_key"/>
              </template>
              <template v-slot:append>
                <q-icon
                    :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    @click="isPwd = !isPwd"
                />
              </template>
            </q-input>
            <!-- 登录按钮 -->
            <q-btn :loading="loading" class="logon-btn bg-logon-card-input"
                   text-color="white" unelevated style="font-size: large;" @click="logon"
            >登 录 系 统
            </q-btn>
            <div class="row justify-between" style="margin-bottom: 20px;">
              <q-btn flat label="忘记密码"/>
              <q-btn outline label="我要注册" @click="isRegistry = true"/>
            </div>
          </q-card-section>
        </q-card>
      </div>
      <div v-if="isRegistry" class="col flex justify-center items-center">
        <q-card square style="min-width: 290px;height: 100%; width: 60%;" class="no-shadow">
          <q-card-section align="center">
            <h4 class="text-uppercase">
              <span>用 户 注 册</span>
            </h4>
            <q-input class="logon-input"
                     clearable
                     standout="bg-cyan text-white"
                     bottom-slots
                     v-model="userForm.name"
                     label="用户名"
            >
              <template v-slot:prepend>
                <q-icon name="face"/>
              </template>
            </q-input>
            <!-- 账号 -->
            <q-input class="logon-input"
                     clearable
                     standout="bg-cyan text-white"
                     bottom-slots
                     v-model="userForm.account"
                     label="账号"
            >
              <template v-slot:prepend>
                <q-icon name="account_circle"/>
              </template>
            </q-input>
            <!-- 密码 -->
            <q-input class="logon-input"
                     standout="bg-cyan text-white"
                     bottom-slots
                     v-model="userForm.password"
                     label="密码"
                     :type="isPwd ? 'password' : 'text'" hint=""
            >
              <template v-slot:prepend>
                <q-icon name="vpn_key"/>
              </template>
              <template v-slot:append>
                <q-icon
                    :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    @click="isPwd = !isPwd"
                />
              </template>
            </q-input>
            <q-input class="logon-input"
                     standout="bg-cyan text-white"
                     bottom-slots
                     v-model="userForm.passwordConfirm"
                     label="密码确认"
                     :type="isPwd ? 'password' : 'text'" hint=""
            >
              <template v-slot:prepend>
                <q-icon name="vpn_key"/>
              </template>
              <template v-slot:append>
                <q-icon
                    :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    @click="isPwd = !isPwd"
                />
              </template>
            </q-input>
            <q-btn :loading="loading" color="secondary" class="logon-btn bg-logon-card-input"
                   text-color="white" unelevated style="font-size: large;"
                   @click="registry"
            >提 交 注 册
            </q-btn>
            <div class="row justify-between" style="margin-bottom: 20px;">
              <q-btn flat label="忘记密码"/>
              <q-btn outline label="我要登陆" @click="isRegistry = false"/>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>

</template>

<script>

import iUser from '../api/user'
import { cloneDeep } from 'lodash'
import { passwordClientBcrypt } from 'src/utils/utils'

export default {
  name: 'Logon',
  props: {
    fromVisitor: Boolean
  },
  data () {
    return {
      isPwd: true,
      userForm: {
        name: '',
        account: '',
        password: '',
        passwordConfirm: ''
      },
      defaultOptions: {
        path: 'https://assets9.lottiefiles.com/packages/lf20_vo0a1yca.json',
        loop: true
      },
      loading: false,
      percentage: 0,
      isRegistry: this.fromVisitor
    }
  },
  components: {},
  methods: {
    async logon () {
      this.loading = !this.loading
      try {
        const form = cloneDeep(this.userForm)
        form.password = await passwordClientBcrypt(form.password)
        let data = await iUser.login(form)
        if (!data) {
          data = await iUser.login(this.userForm)
        }
        localStorage.setItem('x-access-token', data.accessToken)
        await this.$store.dispatch('initUserInfo')
        const url = new URL(location.href)
        const redirectUrl = (/next=([^&]*)/.exec(url.search) || [])[1]
        if (redirectUrl) {
          const url = new URL(decodeURIComponent(redirectUrl))
          url.search = url.search
              ? `${url.search}&token=${data.accessToken}`
              : `token=${data.accessToken}`
          location.href = url.toString()
          return
        }
        await this.$router.push('/')

        this.$q.notify({
          icon: 'insert_emoticon',
          message: 'hi，欢迎回来',
          color: 'green',
          position: 'top',
          timeout: 1000
        })
      } catch (e) {
        this.$q.notify({
          icon: 'announcement',
          message: e,
          color: 'red',
          position: 'top',
          timeout: 1500
        })
      } finally {
        this.loading = false
      }
    },
    async registry () {
      this.loading = !this.loading
      try {
        // 提交注册
        this.userForm.name = this.userForm.account
        const form = cloneDeep(this.userForm)
        form.password = await passwordClientBcrypt(form.password)
        await iUser.registry(form)
        this.$q.notify({
          icon: 'insert_emoticon',
          message: '恭喜注册成功！',
          color: 'green',
          position: 'top',
          timeout: 1500
        })
        await this.logon()
        this.isRegistry = false
      } catch (e) {
        this.$q.notify({
          icon: 'announcement',
          message: e,
          color: 'red',
          position: 'top',
          timeout: 1500
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.logon-btn {
  font-size: large;
  margin-top: 0;
  margin-bottom: 20px;
  width: 100%;
}

.bg-logon-card-input {
  background: linear-gradient(to right, #36d1dc 1%, #5b86e5 99%);
  transition: all 0.3s ease-in-out;
  background-size: 200% auto;
}

.bg-logon-card-input:hover {
  background-position: right center;
  box-shadow: 0 12px 20px -11px #5b86e5;
}
</style>
